﻿<template>
  <div class="ad_list_container" ref="git_contain">
    <Header_other v-bind:header_name="header_name"></Header_other>
    <div class="main_container clearfix">
      <div id="wrap_scroller clearfix">
        <scroller :on-refresh="refresh"
                  :on-infinite="infinite" class="clearfix">
          <!-- content goes here -->
          <div class="" ref="el" id="scroller">
            <!-- content goes here -->
            <!-- box -->
            <div class="ad_list_box" v-for="menu_list in menu_list">
              <!-- header -->
              <div class="ad_list_header">
                <img v-bind:src="menu_list.user.image|judge_and_add_Base" class="header_user_img"/>
                <div class="ad_header_user_id">
                  ID:{{menu_list.id}}
                </div>
                <div class="add_f_btn" v-on:click="add_friend(menu_list.user.id)">
                  加好友
                </div>
                <div class="guanz_btn" v-on:click="add_focus(menu_list.user.id)">
                  关注
                </div>
              </div>
              <!-- header -->
              <!-- main s -->
              <div class="ad_list_main">
               <!-- <img src="../../static/img/new_play_music.jpg" class="new_p_m">-->
                <div class="ad_list_w">
                  {{menu_list.answer}}
                </div>
               <!-- <img src="../../static/img/bg_all.png" class="ad_list_img"/>-->
              </div>

              <!-- main e -->
            </div>

          </div>
        </scroller>
      </div>
      </div>
    </div>
</template>

<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  import Header_other from "./header_other/Header_other.vue";
  import common from "../common/common.js";
  import filter from "../filter/filter.js";
  //limit_Scroll
  //import limit_scroll from "../../static/js/limit_scroll.js"
  var qs = require('qs');
  //axios.post('/foo', qs.stringify({ 'bar': 123 }));

export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      show_layer:false,
      get_layer_show: this.$store.getters.get_layer_show,
      layer_show: false,
      header_name: "冒险回复",
      layer_give_friend_data: false,
      give_other_data: false,
      this_box_msg: {},
      menu_list: [],
      pageNo: 1,
      pageSize:10
    }
  },
  ...mapActions([
    "thom_redirect",
   
  ]),
 
  ...mapMutations([
     "Change_certain_layer"
  ]),
  mounted: function () { 
    ///api/user / personalHomepage / getAnswerQuestionsList
    //limit_scroll(this.$refs.el, this.$refs.git_contain);
    //qs.stringify({ 'rid': 2, "pageNo": 0, "pageSize": 6 }))
    let user_id = common.get_user_id();
    this.$http.post('/yizhiweimen/api/user/personalHomepage/getAnswerQuestionsList',
        qs.stringify(
        {
          'cardId': user_id,
          "pageNo": 1,
          "pageSize": 10
        })
      )
      .catch( (thrown)=> {
        console.log(thrown)
      }).then((e) => {
        this.menu_list = e.data
      })
  },
  methods: {
    //下拉
    ...mapGetters([
      "get_ajax_base"
    ]),
    refresh: function (done) {
      let user_id = common.get_user_id();
      this.$http.post('/yizhiweimen/api/user/personalHomepage/getAnswerQuestionsList',
        qs.stringify(
          {
            'cardId': user_id,
            "pageNo": this.pageNo,
            "pageSize": this.pageSize
          })
      )
        .catch((thrown) => {
          console.log(thrown)
        }).then((e) => {
          let list = this.menu_list;
          this.menu_list = list.concat(e.data);
        })
    },
    //上啦
    infinite: function (done) { 
      //done()
      console.log("上啦____________")
      let user_id = common.get_user_id();
      this.$http.post('/yizhiweimen/api/user/personalHomepage/getAnswerQuestionsList',
        qs.stringify(
          {
            'cardId': user_id,
            "pageNo": 1,
            "pageSize": this.pageSize
          })
      )
        .catch((thrown) => {
          console.log(thrown)
        }).then((e) => {
          this.menu_list = e.data
          
        })
    }
  },
  components: {
    Header_other
  }
}
</script>
<style scoped>
  .ad_list_img{
    width:74vw;
  } 
  .new_p_m {
    width: 62vw;
    margin-top: 3vw;
  } 
  .ad_list_container {
    background-color: #eee;
    width: 100%;
    height: 100%;
  }
  .ad_list_w{
    font-size:3vw;
    margin-top:1vw;
    margin-bottom:1vw;
    color:#9f5c2f;
  }
  /*ad_list_box s*/
  /*ad_main s*/
  .ad_list_main {
    width: 88vw;
    height: 32.8vw;
    margin: 1.8vw auto 0;
    border: 1px solid #9f5c2f;
    overflow: scroll;
  }
  /*ad_main e*/
  .guanz_btn {
    padding-left: 2.6vw;
    padding-right: 2.6vw;
    height: 6vw;
    color: #fff;
    background-color: #9f5c2f;
    line-height: 6vw;
    border: 2px solid #9f5c2f;
    border-radius: 1vw;
    margin-top: 3vw;
    margin-left: 1.4vw;
  } 
  .add_f_btn {
    padding-left: 2.6vw;
    padding-right: 2.6vw;
    color: #9f5c2f;
    border: 2px solid #9f5c2f;
    border-radius: 1vw;
    line-height: 1;
    font-size: 3.7vw;
    height: 6vw;
    line-height: 6vw;
    margin-top: 3vw;
    margin-left: 11.7vw;
  }
  .ad_header_user_id {
    font-size: 3.7vw;
    color: #9f5c2f;
    padding-top:6vw;
  } 
  .header_user_img {
    width: 8.6vw;
    height: 8.6vw;
    border-radius: 1vw;
    border: 1px solid #9f5c2f;
    margin-top: 1.3vw;
    margin-left:3vw;
    margin-right:2vw;
  } 
  .ad_list_header {
    display:flex;
    width: 100%;
    height: 11.7vw;
  } 
  .ad_list_box {
    width: 92vw;
    height: 48.8vw;
    background-color: #fff;
    border: 1px solid #9f5c2f;
    border-radius: 2vw;
    margin: 0 auto;
    box-shadow: 0 0px 8px 4px rgba(128, 128, 128, 0.5);
  }

  .wrap_scroller {
    height: 100%;
    margin-top: 11.7vw;
  }
  #scroller{
    margin-top:14vw;
  }
  /*ad_list_box e*/
</style>